/**
 * 表格设置组件
 */
function scTableSetting(){
    var com = scCommon.instance();
    var crEle = com.crEle;
    
    /**
     * 当前设置属性
     */
    var prop = {
        rowCount: 0,
        columnCount: 0
    };

    /**
     * 创建视图
     * @param{*} option
     */
    this.createView = function(option){
        option = option ? option : {};

        var box = crEle(null, "sc-table-setting");
        
        var label = crEle(label);
        label.innerText = "插入表格";

        var row = crEle(null, "sc-table-setting-row");
        row.appendChild(label);
        box.appendChild(row);

        var rows = 10, cols = 10;
        var table = crEle(null, "sc-table-setting-box")
        var cell = null;

        for(var i = 0; i < rows; i++){
            row = crEle(null, "sc-table-setting-tr");

            for(var j = 0; j < cols; j++){
                cell = crEle(null, "sc-table-setting-td");
                row.appendChild(cell);
            }

            table.appendChild(row);
        }

        box.appendChild(table);

        var more = crEle(null, "sc-setting-more");
        more.innerText = "自定义表格...";
        box.appendChild(more);

        more.addEventListener("click", (e)=>{
            if(option.showDialog){
                option.showDialog(getDetailSetting());
            }
        });

        table.addEventListener("mousemove", (e)=>{
            if(e.target.classList.contains("sc-table-setting-td")){
                let row = e.target.parentNode;
                let table = row.parentNode;

                prop.rowCount = indexOf(table.children, row) + 1;
                prop.columnCount = indexOf(row.children, e.target) + 1;

                label.innerText = prop.rowCount + " × " + prop.columnCount + " 表格";

                highlightCell(prop.rowCount - 1, 
                    prop.columnCount - 1, table.children.length, row.children.length, table);
            }
        });

        table.addEventListener("mousedown", (e)=>{
            if(prop.rowCount <= 0 || prop.columnCount <= 0) return;
            if(option.triggerListener){
                option.triggerListener(prop);
            }
        });

        table.addEventListener("mouseleave", (e)=>{
            prop.rowCount = 0;
            prop.columnCount = 0;

            highlightCell(prop.rowCount - 1, prop.columnCount - 1, rows, cols, table);
            
            label.innerText = "插入表格";
        });

        return box;
    }

    /**
     * 获取详细设置页面
     * @param {*} option
     * @returns 
     */
    var getDetailSetting = function(){
        return {
            label: "表格设置",
            component: detail()
        };
    }

    /**
     * 明细组件
     * @param {*} opt
     */
    var detail = function(opt){
        opt = opt ? opt : {};

        var box = null;

        this.createView = function(option){
            option = option ? option : {};
            box = crEle(null, "sc-table-setting-detail");

            var list = [
                {label: "行数", name: "rowCount", value: 1, unit: "行", minNum: 1, maxNum: 200},
                {label: "列数", name: "columnCount", value: 1, unit: "列", minNum: 1, maxNum: 30}
            ];

            var row = null;
            var item = null;
            for(var i in list){
                item = list[i];

                row = crEle(null, "sc-setting-row");

                let label = crEle("label", "sc-setting-label");
                let number = new scNumber();

                let param = {
                    name: item.name,
                    value: item.value,
                    unit: item.unit,
                    minNum: item.minNum,
                    maxNum: item.maxNum
                };
                let input = null;
    
                input = number.createView(param);
                label.innerText = item.label + "：";

                row.appendChild(label);
                row.appendChild(input);
                box.appendChild(row);
            }

            return box;
        }

        this.getData = function(){
            return com.getData(box);
        }

        return this;
    };

    /**
     * 找出list中element的序号
     * @param {*} list 
     * @param {*} element 
     * @returns 
     */
    var indexOf = function(list, element){
        for(var i = 0; i < list.length; i++){
            if(list[i] === element){
                return i;
            }
        }

        return null;
    }

    /**
     * 高亮显示指定单元格
     * @param {*} rowIndex 
     * @param {*} colIndex 
     * @param {*} rowCount 
     * @param {*} colCount 
     * @param {*} table 
     */
    var highlightCell = function(rowIndex, colIndex, rowCount, colCount, table){
        for(var i = 0; i < rowCount; i++){
            for(var j = 0; j < colCount; j++){
                if(i <= rowIndex && j <= colIndex){
                    table.children[i].children[j].style.backgroundColor = "#ddd";
                }else{
                    table.children[i].children[j].style.backgroundColor = null;
                }
            }
        }
    }
}